<template>
    <div app-container>
        <el-row type="flex" justify="center">
            <el-col :span="22">
                <div align="center" style="background-color:#eaedef; height: 60px;">
                    <div>
                        <span id="mainTitle">申请资料填写</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <div>
                    <el-descriptions size="medium" :column="2" style="font-size:large;">
                        <el-descriptions-item label="贷款编号">
                            <span>{{}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="渠道名称">
                            <span>{{}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="渠道产品">
                            <span>{{}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="客户姓名">
                            <span>{{}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="手机号">
                            <span>{{}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="身份证号码">
                            <span>{{}}</span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>
        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <div>
                    <el-descriptions title="借款信息" size="medium" :column="2" style="font-size:large;">
                        <el-descriptions-item label="贷款金额" >
                            <el-input placeholder="请输入贷款金额" style="width: 360px"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="还款方式">
                            <dict-tag :options="dict.type.loan_info_payment_method"
                                value="" style="width: 360px"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="分期期数">
                            <el-select v-model="value" placeholder="请选择分期期数" style="width: 360px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="贷款用途">
                            <el-input placeholder="请输入贷款用途" style="width: 360px"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="还款来源">
                            <el-input placeholder="请输入还款来源" style="width: 360px"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="还款保障">
                            <el-input placeholder="请输入还款保障" style="width: 360px"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                    <hr />
                </div>
            </el-col>
        </el-row>

        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <div v-for="(one, index) in allData" :key="index">
                    <el-descriptions :title="one.title" name="1" size="medium" :column="3" class="title"
                        style="font-size:large;">
                        <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1"
                            :label="oneone.fieldName">
                            <div v-if="oneone.fieldType != 'pictrue' && oneone.fieldType != 'select'">
                                <el-input v-model="oneone.value" :type="oneone.fieldType"></el-input>
                            </div>
                            <div v-else-if="oneone.fieldType == 'select'">
                                <el-select v-model="oneone.value" placeholder="">
                                    <el-option v-for="opt in oneone.fieldOption.split('，')" :label="opt.name"
                                        :value="opt" />
                                </el-select>
                            </div>
                            <div v-else-if="oneone.fieldType == 'pictrue'">
                                <div v-if="oneone.fieldName.includes('正面')">
                                    <el-upload class="avatar-uploader" action="http://localhost:8080/feed/imgUpload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess0"
                                        :before-upload="beforeAvatarUpload" :auto-upload="true"
                                        :headers="uploadHeaders">
                                        <img v-if="imageUrl0" :src="imageUrl0" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                                <div v-else-if="oneone.fieldName.includes('反面')">
                                    <el-upload class="avatar-uploader" action="http://localhost:8080/feed/imgUpload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess1"
                                        :before-upload="beforeAvatarUpload" :auto-upload="true"
                                        :headers="uploadHeaders">
                                        <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                                <div v-else-if="oneone.fieldName.includes('手持')">
                                    <el-upload class="avatar-uploader" action="http://localhost:8080/feed/imgUpload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess2"
                                        :before-upload="beforeAvatarUpload" :auto-upload="true"
                                        :headers="uploadHeaders">
                                        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                                <div v-else-if="oneone.fieldName.includes('驾驶证照片')">
                                    <el-upload class="avatar-uploader" action="http://localhost:8080/feed/imgUpload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess3"
                                        :before-upload="beforeAvatarUpload" :auto-upload="true"
                                        :headers="uploadHeaders">
                                        <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                                <div v-else-if="oneone.fieldName.includes('车辆图片')">
                                    <el-upload class="avatar-uploader" action="http://localhost:8080/feed/imgUpload"
                                        :show-file-list="false" :on-success="handleAvatarSuccess4"
                                        :before-upload="beforeAvatarUpload" :auto-upload="true"
                                        :headers="uploadHeaders">
                                        <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>
        <div class="fixed-button">
            <el-row type="flex" justify="end">
                <el-col :span="4" :offset="5">
                    <el-button type="primary" @click="SubmitAndSave">提交</el-button>
                </el-col>
                <el-col :span="8" :offset="4">
                    <el-button type="warning" @click="SubmitAndNoSave">提交不保存</el-button>
                </el-col>
                <el-col :span="6" :offset="3">
                    <el-button type="primary" @click="Abandon">放弃申请</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { dataRenering, newViewDetails, saveInfoToClientTable } from '@/api/viewDetails'
export default {
    dicts: ['loan_info_payment_method'],
    data() {
        return {
            clientId: 17,//待定，上个页面传过来。
            allData: [
                {
                    title: '个人信息',
                    data: []
                }
            ],
            saveData: {
                clientId: undefined,
                allData: []
            },
            newData: [],
            imageUrl0: '',
            imageUrl1: '',
            imageUrl2: '',
            imageUrl3: '',
            imageUrl4: '',
            pageInfo: [
                {
                    name: undefined
                }
            ],
            userInfo: [],
            activeNames: ['1'],
            options: [{
                value: '3',
                label: '3期'
            }, {
                value: '6',
                label: '6期'
            }, {
                value: '9',
                label: '9期'
            }, {
                value: '12',
                label: '12期'
            }, {
                value: '24',
                label: '24期'
            }, {
                value: '48',
                label: '48期'
            }, {
                value: '64',
                label: '64期'
            }],
            value: ''
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            dataRenering().then(res => {
                this.allData = res.data
            }).catch()
        },
        saveUerInfo() {
            console.log(this.allData)
            const clientId = 3
            // 保存信息
            saveInfoToClientTable(this.allData)
        },
        saveUerInfo() {
            // 保存信息
            saveInfoToClientTable(this.allData)
        },
        handleAvatarSuccess0(res, file) {
            this.imageUrl0 = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess1(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess2(res, file) {
            this.imageUrl2 = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess3(res, file) {
            this.imageUrl3 = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess4(res, file) {
            this.imageUrl4 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt5M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt5M) {
                this.$message.error('上传图片大小不能超过 5MB!');
            }
            return isJPG && isLt5M;
        },
        SubmitAndSave() {
            
            saveInfoToClientTable(this.clientId, this.allData).then(res => {
                console.log(res)
            }).catch()
        },
        SubmitAndNoSave() {

        },
        Abandon() {

        }

    }
}
</script>
<style>
body>.el-container {
    margin-bottom: 40px;
    display: inline-block;
}

#mainTitle {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    float: left;
    height: 60px;
    margin-top: 10px;
}

.title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
    padding-bottom: 17px;
    padding-top: 17px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.fixed-button {
    position: fixed;
    right: 139px;
    bottom: 10px;
    padding: 8px;
    text-align: right;
}
</style>
